<template>
    <div class='container-my'>
        <!--   左 start    -->
        <div class='left-side'>
            <el-card>
                <div class='top-one'>
                    <div class='sub-title'>养殖操作记录</div>
                    <div class='table-box'>
                        <el-table class='table' :data="tableData">
                            <el-table-column align="center" prop="beginTime" label="操作时间" width="90"></el-table-column>
                            <el-table-column align="center" prop="principalName" label="负责人" width="90"></el-table-column>
                            <el-table-column align="center" prop="type" label="养殖任务名称" width="100"></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class='under-one'>

                    <div class='sub-title'>基地管理信息</div>
                    <div class='info-box'>
                        <div class='avatar'>
                            <el-avatar :size="64" :src="info.logo"></el-avatar>
                        </div>
                        <span>{{info.name}}</span>
                    </div>
                    <div class='info-row'>
                        <span class='facility'>基地名称</span>
                        <span class='names'>{{info.plantCompany}}</span>
                    </div>
                    <div class='info-row'>
                        <span class='facility'>联系方式</span>
                        <span class='names'>{{info.phone}}</span>
                    </div>
                    <div class='info-row'>
                        <span class='facility'>负责人</span>
                        <span class='names'>{{info.name}}</span>
                    </div>
                    <div class='info-row'>
                        <span class='facility'>基地地址</span>
                        <span class='names'>{{info.address}}</span>
                    </div>
                </div>
            </el-card>
        </div>
        <!--   左 end    -->

        <!--   右 start    -->
        <div class='right-side'>
            <div class='right-top-one'>
                <el-card>
                    <div class='sub-title'>数字地图</div>
                    <DigitalMap :drawer='true' class='map'></DigitalMap>
                </el-card>
            </div>
            <div class='right-under-one'>
                <el-card>
                    <div class='title-box'>
                        <div class='sub-title'>养殖统计</div>
                        <el-date-picker clearable v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change='dateChange'></el-date-picker>
                    </div>
                    <div class='statistics-box'>
                        <div class='item' v-for='(item,i) in statisticsData' :key='i'>
                            <div class='number'>{{item.number}}<span style='font-size: 16px;margin-left: 4px'>{{item.unit}}</span></div>
                            <div class='name-box'>
                                <img :src='item.src'>
                                <div>{{item.name}}</div>
                            </div>

                        </div>
                    </div>
                    <div class='charts'>
                        <div class='left-box' style='width: 100%'>
                            <div id='line-chart'></div>
                        </div>
<!--                        <div class='right-box'>-->
<!--                            <div id='ringChart'></div>-->
<!--                            <div id='ringChart2'></div>-->
<!--                        </div>-->
                    </div>
                </el-card>
            </div>
        </div>
        <!--   右 end    -->

    </div>
</template>

<script>
import DigitalMap from '@/components/page/medicinalCrop/digitalMap/digitalMap.vue';
import axios from 'axios';
import echarts from 'echarts';
export default {
    components: { DigitalMap },
    data() {
        return {
            tableData: [],
            info:{},
            date:'',
            statisticsData:[
                {
                    number:'23',
                    name:'地块数量',
                    src:require('@/assets/homeIcon/baseIcon.png'),
                },
                {
                    number:'23',
                    name:'养殖规模',
                    src:require('@/assets/homeIcon/plantIcon.png'),
                    unit:'亩',
                },
                {
                    number:'23',
                    name:'养殖记录',
                    src:require('@/assets/homeIcon/plantAreaIcon.png'),
                },
                {
                    number:'23',
                    name:'养殖任务',
                    src:require('@/assets/homeIcon/farmTaskIcon.png'),
                }
            ],
        }
    },
    mounted() {
        this.getFarmingRecord()
        this.getPlantingStatistics()
    },
    methods: {
        //获取种植统计和采收数量 params - startTime - endTime
        async getPlantingStatistics(startTime,endTime){
            let params = {
                startTime,
                endTime
            }
            // const res = await axios.get('http://1922.168.1.197:8880/plant/iot/plantInfo',{ params: params})

            const res = await axios.get('http://47.108.220.160:90/jcApi/plant/iot/plantInfo',{ params: params})
            if (res && res.data.code == 200){
                let data = res.data.data
                this.statisticsData[0].number = data.soilCnt
                this.statisticsData[1].number = data.plantEd
                this.statisticsData[2].number = data.plantCnt
                this.statisticsData[3].number = data.farmCnt
                let xData = []
                let yData = []
                let originData = data.reapNumberList
                originData.forEach(item=>{
                    xData.push(item.name)
                    yData.push(item.number)
                })
                let ringData = data.plantEdRatio
                let ringData2 = data.notPlantRatio
                // this.initRingChart(ringData)
                // this.initRingChart2(ringData2)
                this.initLineChart(xData,yData)

            }
        },
        //获取农事记录和基地、地块信息
        async getFarmingRecord(){
            const res = await axios.get('http://47.108.220.160:90/jcApi/plant/iot/farmBaseSoilInfo')
            if(res && res.data.code == 200){
                let data =  res.data.data
                this.tableData = data.farmList
                this.info.logo = this.$store.state.plantImg+data.logo
                this.info.name = data.name
                this.info.plantCompany = data.plantCompany
                this.info.phone = data.phone
                this.info.address = data.address

            }

        },
        //datePickerChange
        dateChange(dateRange){
            let startTime = this.$util.dateFormat('yyyy-MM-dd',dateRange[0])
            let endTime = this.$util.dateFormat('yyyy-MM-dd',dateRange[1])
            this.getPlantingStatistics(startTime,endTime)
        },
        // init left chart
        initLineChart(xData,yData){
            let lineChart = this.$echarts.init(document.getElementById('line-chart'))
            let option = {
                grid: {
                    top: '15%',
                    left: '1%',
                    right: '2%',
                    bottom: '0%',
                    containLabel: true,
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: '#233e64'
                        },
                    },
                    axisLabel: { //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#8c8b8b',
                            margin:15,
                        },
                    },
                    axisTick: { show: false,},
                    data: xData
                }],
                yAxis: [{
                    name:'采收数量',
                    nameLocation: 'end',
                    nameGap: 8,
                    nameTextStyle: { // 文字样式
                        color: '#000',
                        fontSize: 14,
                        align: 'right'
                    },
                    type: 'value',
                    min: 0,
                    // max:140,
                    splitNumber: 7,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f3f3'
                        }
                    },
                    axisLine: {show: false,},
                    axisLabel: {
                        margin:20,
                        textStyle: {
                            color: '#939393',

                        },
                    },
                    axisTick: { show: false,},
                }],
                series: [{
                    name: '异常流量',
                    type: 'line',
                    smooth: false, //是否平滑曲线显示
                    // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                    symbolSize:0,

                    lineStyle: {
                        normal: {
                            color: "#02B386"   // 线条颜色
                        }
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0,  color: 'rgba(2,179,134,0.44)'},
                                { offset: 0.7,  color: 'rgba(2,179,134,0.04)'}
                            ], false),

                            shadowColor: '#02B386', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    data: yData
                }]
            };
            lineChart.setOption(option);
        },
        //init ring chart
        initRingChart(data){
            let ringChart = this.$echarts.init(document.getElementById('ringChart'))
            let max = 100;
            let rate = data.split('%')[0]
            let option = {
                title: [
                    {
                        text: '{b|' + rate + '%}\n{a|已种植面积}',
                        show: true,
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: 18,
                                    color: '#414141',
                                    padding: [20, 0,0, 0],
                                },
                                b: {
                                    fontSize:30,
                                    color: '#02B386',
                                    fontFamily: 'alibabaPuhuiM',
                                },
                            },
                        },
                    },
                ],
                polar: {
                    center: ['50%', '50%'],
                    radius: ['75%', '100%'],
                },
                angleAxis: {
                    max: max,
                    show: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'bar',
                        roundCap: false,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(189,188,188,0.4)',
                        },
                        data: [rate],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#02B386',
                                    },
                                    {
                                        offset: 1,
                                        color: '#02B386',
                                    },
                                ]),
                            },
                        },
                    },
                ],
            };
            ringChart.setOption(option);

        },
        initRingChart2(data){
            let ringChart = this.$echarts.init(document.getElementById('ringChart2'))
            let max = 100;

            let rate = data.split('%')[0]
            let option = {
                title: [
                    {
                        text: '{b|' + rate + '%}\n{a|未种植面积}',
                        show: true,
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: 18,
                                    color: '#414141',
                                    padding: [20, 0,0, 0],
                                },
                                b: {
                                    fontSize:30,
                                    color: '#02B386',
                                    fontFamily: 'alibabaPuhuiM',
                                },
                            },
                        },
                    },
                ],
                polar: {
                    center: ['50%', '50%'],
                    radius: ['75%', '100%'],
                },
                angleAxis: {
                    max: max,
                    show: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'bar',
                        roundCap: false,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(189,188,188,0.4)',
                        },
                        data: [rate],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#02B386',
                                    },
                                    {
                                        offset: 1,
                                        color: '#02B386',
                                    },
                                ]),
                            },
                        },
                    },
                ],
            };
            ringChart.setOption(option);

        },

    }


};
</script>
<style lang='less'>
.content-box{
    padding: initial;
}
</style>
<style lang='less' scoped>
.sub-title{
    margin: 5px 0;
}
.container-my{
    display: flex;
    justify-content: space-between;
    .left-side{
        width: 20%;
        .top-one{
            .table-box{
                height: 450px;
                overflow: scroll;
                &::-webkit-scrollbar{
                    display: none;
                }
                .table{
                    margin: 20px 0;
                }
            }
        }
        .under-one{
            .info-box{
                padding: 10px;
                display: flex;
                align-items: center;
                flex-direction: column;
            }
            .info-row{
                margin: 10px 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .facility{
                    color: #8a8a8a;
                    width: 100%;
                }
                .names{
                    text-align: center;
                    color: #000;
                    width: 100%;
                    font-size: 14px;
                }
            }
        }
    }
    .right-side{
        width: 79%;
        /deep/.zoology{
            display: none;
        }
        /deep/.zoology1{
            display: none;
        }
        /deep/.zoology2{
            display: none;
        }
        /deep/.address{
            left: 20px !important;
        }
        .right-top-one{
            height: 50%;
            margin-bottom: 20px;
            overflow: hidden;
            .el-card{
            }
            .map{
                /deep/.tdt-control-copyright{
                    display: none;
                }
                /deep/.mapDiv{
                    height: 36vh;
                }
            }
        }
        .right-under-one{
            height: 50%;
            .title-box{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .statistics-box{
                padding: 20px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .item{
                    border: 1px solid rgba(0,0,0,0.1);
                    height: 100px;
                    width: 280px;
                    border-radius: 4px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .number{
                        margin-bottom: 2px;
                        font-size: 32px;
                    }
                    .name-box{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img{
                            width: 30px;
                            height: 30px;
                            margin-right: 4px;
                        }
                    }
                }
            }
            .charts{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left-box{
                    width: 48.5%;
                    #line-chart{
                        width: 100%;
                        height: 100%;
                        min-height: 171px;
                    }
                }
                .right-box{
                    width: calc(100% - 48.5%);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    #ringChart{
                        width: 50%;
                        min-height: 171px;
                    }
                    #ringChart2{
                        width: 50%;
                        min-height: 171px;
                    }
                }
            }
        }
    }
}
</style>
